<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useSlotManagementStore } from '@/store/slot_mangement';
import usequery from '@/hooks/slot_management/inventoryQuery'
import helperprint from '@/hooks/print/helper_print'
//@ts-ignore
import query_template from "./query_template.js"

//@ts-ignore
import { throttle } from 'lodash';
const SlotManagementStore = useSlotManagementStore();

const {
    loction,
    getquery,
    exportExcel
} = usequery()

const {
    buildDesigner,
} = helperprint()

onMounted(() => {
    buildDesigner(query_template);
});

let screenHeight = ref(window.innerHeight - 260);
window.addEventListener('resize', function () {
    screenHeight.value = window.innerHeight - 260;
});


// 刷新 节流函数
const throttlehandquery = throttle(() => getquery(), 3000, {
    leading: true, // 第一次触发立即执行
    trailing: false // 最后一次触发不执行
});


interface User {
    LocationID: string
    ContractNo: string
}

interface SpanMethodProps {
    row: User
    rowIndex: number
    columnIndex: number,
}

// 合并LocationID相同的行


const objectSpanMethod = ({
    row,
    rowIndex,
    columnIndex,
}: SpanMethodProps) => {
    if (columnIndex === 0) {
        // 获得当前行的LocationID
        const currentLocationID = row.LocationID;
        // 获取上一行的LocationID
        const previousLocationID = rowIndex > 0 ? SlotManagementStore.inventoryQuery_pinia[rowIndex - 1].LocationID : null;
        // 如果当前行的LocationID和上一行的LocationID相同，则合并行  
        if (currentLocationID === previousLocationID) {
            return {
                rowspan: 0,
                colspan: 0,
            };
        } else {
            // 计算有多少行需要合并
            let rowspan = 1;
            for (let i = rowIndex + 1; i < SlotManagementStore.inventoryQuery_pinia.length; i++) {
                if (SlotManagementStore.inventoryQuery_pinia[i].LocationID === currentLocationID) {
                    rowspan++;
                } else {
                    break;
                }
            }
            // 返回合并的行数
            return {
                rowspan,
                colspan: 1,
            };

        }
    }
    return {
        rowspan: 1,
        colspan: 1,
    };
}

</script>

<template>
    <el-card>
        <el-form @submit.native.prevent class="form" :inline="true">
            <el-form-item>
                <el-input v-model="loction" placeholder="查询全部货位请留空，查询特定货位请输入货位号" style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="throttlehandquery" v-has="`btn_inventory_query`"
                    style="margin-left: -30px;">查询</el-button>
                <el-form-item>
                    <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                        icon="InfoFilled" icon-color="#626AEF" title="是否确认导出Excel文件?" @confirm="exportExcel">
                        <template #reference>
                            <el-button type="success" v-has="`btn_inventory__export`"
                                style="margin-left: 30px;">导出Excel</el-button>
                        </template>
                    </el-popconfirm>




                    <!-- <el-button type="warning" @click='exportExcel' v-has1="`btn_slotquery_print`"
                    style="margin-left: 15px;">导出</el-button> -->
                </el-form-item>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <el-scrollbar :height="screenHeight"> <!-- 菜单滚动条 -->
            <el-table :data="SlotManagementStore.inventoryQuery_pinia" :span-method="objectSpanMethod" border
                :height="screenHeight" style="width: 100%">
                <el-table-column prop="LocationID" label="货位"></el-table-column>
                <el-table-column prop="ContractNo" label="合同号"></el-table-column>
                <el-table-column prop="CaseNo" label="箱号"></el-table-column>
                <el-table-column prop="CN_Name" label="国家"></el-table-column>
                <el-table-column prop="PackageType_C" label="包装材质"></el-table-column>
            </el-table>
        </el-scrollbar>
    </el-card>
</template>

<style lang="css" scoped></style>